//------------------------------------------------------------------数据逻辑
const data = {
	lrc: lrc,
	lrcArr: []
}

/**
 * 格式化歌词，数据结构：对象
 */
function parseLrc() {
	const lrcLines = data.lrc.split('\n')
	lrcLines.forEach(item => {
		const parts = item.split(']')
		const lrcObj = {
			time: parseTime(parts[0].substring(1)),
			word: parts[1]
		}
		data.lrcArr.push(lrcObj)
	})
	console.log(data.lrcArr);
}

/**
 * 格式化时间
 * @param {string} timeStr 时间字符串
 * @returns {number} 秒数
 */
function parseTime(timeStr) {
	const parts = timeStr.split(':')
	return (parts[0] * 60 + (+parts[1])).toFixed(2) * 1
}


//------------------------------------------------------------------------------------界面逻辑
// 界面中的要使用的dom节点
const doms = {
	audio: document.querySelector('audio'),
	lrcBox: document.querySelector('.lrc_box'),
	ul: document.querySelector('.lrc_list')
}

const uiData = {
	currentIndex: -1,
	lrcBoxHeight: doms.lrcBox.clientHeight,
	liHeight: 0
}

/**
 * 初始化页面
 */
function initPage() {
	// 初始化 lrcArr
	parseLrc()
	data.lrcArr.forEach(lrc => {
		const li = document.createElement('li')
		li.classList.add('lrc_word')
		li.innerText = lrc.word
		doms.ul.appendChild(li)
	})

	// 设置 liHight 高度
	uiData.liHeight = doms.ul.children[0].clientHeight
}


/**
 * 查找当前歌词索引
 */
function findCurrentIndex() {
	const currentTime = doms.audio.currentTime

	for (let index in data.lrcArr) {
		const lrc = data.lrcArr[index]
		if (lrc.time > currentTime) {
			uiData.currentIndex = index - 1
			return
		}
	}

	uiData.currentIndex = data.lrcArr.length - 1
}

/**
 * 高亮显示当前歌词
 */
function highLightLrc() {
	// 确保每次调用 索引 是正确的
	findCurrentIndex()
	const oldLi = doms.ul.querySelector('.lrc_word_active')
	// 考虑边界
	oldLi ? oldLi.classList.remove('lrc_word_active') : 1
	if (uiData.currentIndex > -1) {
		const li = doms.ul.children[uiData.currentIndex]
		li.classList.add('lrc_word_active')
	}
}

/**
 * 歌词滚动
 */
function setUlOffset() {
	highLightLrc()

	let height = uiData.liHeight * uiData.currentIndex + uiData.liHeight / 2 - uiData.lrcBoxHeight / 2
	if (height < 0) {
		height = 0
	}
	doms.ul.style.transform = `translateY(-${height}px)`
	// console.log(height);
}

initPage()

//---------------------------------------------------------------------------------------------------------事件逻辑
doms.audio.addEventListener('timeupdate', function() {
	setUlOffset()
})

window.addEventListener('keydown', function(e) {
	// // 旧 键盘映射
	// switch (e.keyCode) {
	// 	case 37:
	// 		doms.audio.currentTime -= 5
	// 		break;
	// 	case 39:
	// 		doms.audio.currentTime += 5
	// 		break;
	// }
	
	// 新方法
	console.log(e.key);
	switch (e.key) {
		case 'a':
			console.log('键盘a')
			break;
		case 'f':
			console.log('键盘f')
			break;
	}
})